<template>
  <el-card class="right-content">
    <div class="flexDiv">
      <div class="form-title">
        时间加速<el-tooltip
          class="item"
          effect="light"
          content="第一条的停止时间是第二条的开始时间，以此类推"
          placement="right-start"
          style="margin-top: 0px"
        >
          <i
            class="el-icon-warning"
            style="margin-left: 6px; color: #1890ff"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <el-table
      :data="TimeData"
      style="width: 98%; margin-top: 10px"
      class="tableBox"
      stripe
      max-height="346"
    >
      <el-table-column label="序号" prop="index" width="55" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="start" label="开始时间" align="center">
        <template slot-scope="scope"> {{ scope.row.start }} 分钟</template>
      </el-table-column>
      <el-table-column prop="end" label="停止时间" align="center">
        <template slot-scope="scope"> {{ scope.row.end }} 分钟</template>
      </el-table-column>
      <el-table-column prop="multiple" label="加速倍数" align="center">
        <template slot-scope="scope"> {{ scope.row.multiple }} 倍</template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin: 6px">
      <el-button
        type="primary"
        plain
        size="mini"
        @click="upStep"
        style="width: 80px"
        >上一步</el-button
      >
      <el-button
        type="primary"
        plain
        size="mini"
        @click="complete"
        style="width: 80px"
        >完成</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { getAccList } from "@/api/emergency/time";
export default {
  props: ["pracId"],
  // props: ["object"],
  data() {
    return {
      TimeData: [], //时间加速列表
      // pracId: "", // 路由传参演习id
      total: 0,
      tabName: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getTimeList();
  },
  methods: {
    getTimeList() {
      // getAccList({ pracId: this.pracId }).then((res) => {
      this.$axios.get("/static/emergency/practice/accList.json").then((res) => {
        this.TimeData = res.data.rows;
        this.total = res.data.total;
        this.TimeData.sort(this.sortData);
      });
    },
    sortData(a, b) {
      return a.start - b.start;
    },
    complete() {
      // this.$emit("changeStepActive", 1);
      // 返回list页面
      this.$router.push({
        path: "/practice/script",
      });
    },
    upStep() {
      this.$emit("changeStepActive", 1);
    },
  },
};
</script>

<style scoped lang="scss">
// title
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
.right-title {
  height: 40px;
  font-size: 14px;
  margin-left: 40px;
}

// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
// ::v-deep .el-input__inner {
//   width: 200px;
//   height: 28px;
//   font-size: 14px;
// }
.el-button {
  height: 28px;
  width: 64px;
  font-size: 14px;
  line-height: 5px;
}
.card-box {
  padding: 0px;
  // margin-bottom: 20px;
}
// right-left
.card-left {
  width: 40%;
  height: 600px;
  // background-color: rgb(124, 66, 66);
}

.card-title {
  padding-left: 10px;
  margin: 6px 0px;
  font-size: 16px;
  font-weight: bold;
}
.flexDiv {
  display: flex;
  // justify-content: space-between;
  .card-time {
    padding-left: 20px;
    margin: 6px 0px;
    font-size: 14px;
    line-height: 24px;
  }
}
::v-deep .el-card__body {
  width: 100%;
}
::v-deep .el-input__inner {
  // width: 200px;
  height: 28px;
  font-size: 14px;
}
.form-title {
  margin-left: 8px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
}
.content-card {
  height: 500px;
  // width: 300px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left-step {
    // width: 300px;
    height: 100%;
    width: 20%;
    // background-color: rgb(134, 110, 110);
  }
  .right-content {
    // width: 900px;
    margin-left: 2%;
    width: 78%;
    height: 98%;
  }
}
// table
::v-deep .el-table {
  height: 460px;
  border: 0;
  padding-left: 10px;
  th,
  tr,
  td {
    border: 0;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }
  .el-table__fixed:before {
    height: 0;
  }
  // 去掉表格下划线
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
  }
  // 去掉表头下划线
  thead tr th.is-leaf {
    border: 0px solid #ebeef5;
    border-right: none;
  }
}
</style>
